<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="">
<meta name="robots" content="all,follow">

    <title>Bootstrap Admin Template </title>
    <link rel="shortcut icon" href="${ctx}/static/img/favicon.ico">
    
    <!-- global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="${ctx}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/static/css/font-icon-style.css">
    <link rel="stylesheet" href="${ctx}/static/css/style.default.css" id="theme-stylesheet">
	<style>
		.mb10{
			margin-bottom: 10px;
		}
		.ml10{
			margin-left: 10px;
		}
		.f-fl{
			float: left;
		}
		.f-fr{
			float: right;
		}
		.cf{
			display: table;
			content: '';
			clear: both;
		}
		.title{
			height: 40px;
			lline-height: 40px;
			border-bottom: 1px solid #000;
			margin-bottom: 30px;
		}
		.form-control{
			width: 150px !important;
		}
		.table td, .table th {
		    padding: .5rem !important;
		    vertical-align: middle;
		}
	</style>
    <!-- Core stylesheets -->
</head>

<body> 

<!--====================================================
                         MAIN NAVBAR
======================================================-->        
	<jsp:include page="../header.jsp" />
<!--====================================================
                        PAGE CONTENT
======================================================-->
    <div class="page-content d-flex align-items-stretch">

        <!--***** SIDE NAVBAR *****-->
         <jsp:include page="../left.jsp" />
		 <jsp:include page="../alertMsg.jsp" />
        <div class="content-inner chart-cont">
			<h5 class="title">书籍类别管理</h5>
			<button type="" class="btn btn-info f-fl" onclick="add()">添加</button>
			<button type="" class="btn btn-danger ml10 f-fl" onclick="del()">删除</button>		
			<form id = "myForm">
			<div class="mb10 f-cb">
				<div class="form-group ml10 f-fl">
					<div class="input-group">
						<div class="input-group-addon">查询条件</div>
						<select class="form-control" name="queryName">
							<option value="" >选择查询列</option>
							<option value="typeName" <c:if test="${queryName == 'typeName'}">selected="selected"</c:if> >书籍类型名</option>
							
						</select>
					</div>
				</div>
				<div class="form-group ml10 f-fl">
					<div class="input-group">
						<div class="input-group-addon">查询内容</div>
						<input name="queryValue" class="form-control" type="text"
							value="${queryValue}" placeholder="查询内容">
					</div>
				</div>
				<button type="submit" class="btn btn-primary ml10 f-fl" onclick="search()">查询</button>
				
			</div>
            <!--***** CONTENT *****--> 
            <div class="">
                <table class="table table-hover">
                  <thead>
                    <tr class="bg-info text-white">
                      <th><input type="checkbox" name="selAll"
						onClick="selectAll(this)"></th>
                      <th>书籍类型名</th>
                      <th>描述</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                  	<c:forEach items="${list }" var="typeBook">
                    <tr>
                      <th scope="row"><input type="checkbox" name="idGroup" value="${typeBook.id}" /></th>
                      <td>
                      	${typeBook.typeName}
                      </td>
                      <td>${typeBook.describes}</td>
                      <td>
                         <a class="btn btn-info btn-sm" href="${ctx}/typeBook/edit/${typeBook.id}">修改</a>
                         <!-- <button class="btn btn-info btn-sm">修改</button> -->
					  </td>
							
                    </tr>
                   </c:forEach> 
                  </tbody>
                </table>
            </div>
            </form> 
        </div>
    </div> 
	
    <!--Global Javascript -->
    <script src="${ctx}/static/js/jquery.min.js"></script>
    <script src="${ctx}/static/js/popper/popper.min.js"></script>
    <script src="${ctx}/static/js/tether.min.js"></script>
    <script src="${ctx}/static/js/bootstrap.min.js"></script>
    <script src="${ctx}/static/js/jquery.cookie.js"></script>
    <script src="${ctx}/static/js/jquery.validate.min.js"></script> 
    <script src="${ctx}/static/js/chart.min.js"></script> 
    <script src="${ctx}/static/js/front.js"></script> 
    
    <!--Core Javascript -->
<script>
    function add() {
		location.href = "${ctx}/typeBook/add";
	}

	function del() {
		if ($("[name='idGroup']:checked").length <= 0) {
			//alert("请选择一个您要删除的！");
			alertMsg("请选择一个您要删除的！", "warning");
		} else {
			if (confirm("确定要删除吗？")) {
				$("#myForm").attr("action", "${ctx}/typeBook/delete");
				$("#myForm").submit();
			}
		}
	}

	function selectAll(c) {
		$("[name='idGroup']").prop("checked", $(c).is(':checked'));
	}
</script> 
</body>

</html>